<template>
  <div class="tabs">
    <router-link to="/homepage" tag="div" class="tab-item">
      <i class="icon iconfont icon-homefill"></i>
      <span class="text">首页</span>
    </router-link>
    <router-link to="/goodprice" tag="div" class="tab-item">
      <i class="icon iconfont icon-round_light_fill"></i>
      <span class="text">好价</span>
    </router-link>
    <router-link to="/goodgoods" tag="div" class="tab-item">
      <i class="icon iconfont icon-round_friend_fill"></i>
      <span class="text">好物社区</span>
    </router-link>
    <router-link to="/userpage" tag="div" class="tab-item">
      <i class="icon iconfont icon-my_fill_light"></i>
      <span class="text">我的</span>
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'tabs'
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/variable'

.tabs
  display: flex
  align-items: center
  background: $color-background-tabs
  box-shadow: 0 0px 6px $color-text-light
  .tab-item
    display: flex
    flex-direction: column
    justify-items: center
    flex: 1
    text-align: center
    padding: 0px 10px
    color: #666666
    &.router-link-active
      color: $color-icon-font-active
    .icon
      font-size: 22px
      line-height: 22px
      margin: 0 0 2px 0
    .text
      font-size: $font-size-small-s
      line-height: 18px
      font-weight: 600
      color: #666666

</style>
